<template>
  <div class="page has-navbar" v-nav="{ title: '登录'}">
    <div class="page-content text-center">

      <!-- 密码登陆 -->
      <!-- <div v-if="isPwd">
        <div class="has-header login_content">
          <div style="position:relative">
            <mt-field placeholder="手机号码" v-model="modal.userName"></mt-field>
            <mt-button class="" :disabled="time !=60" @click="sendCode" type="primary" size="small">{{text}}</mt-button>

          </div>
          <mt-field placeholder="验证码" v-model="modal.yzm"></mt-field>
          <p class="waring fn-12">温馨提示，未注册饿了么账号的手机号，登录时将自动注册，且表示您已同意《用户协议》</p>
        </div>
      </div> -->

      <!-- 验证码登陆 -->
      <!-- <div v-else> -->
      <div>
        <div v-if="showLogin" class="has-header login_content">
          <von-input placeholder="手机号码" v-model="user.phone" label="手机号" autocomplete="false"></von-input>
          <von-input placeholder="密码" type="password" v-model="user.password" autocomplete="false" label="密码"></von-input>
        </div>
        <div v-else class="has-header login_content">
          <von-input placeholder="姓名" v-model="register.name" label="姓名" autocomplete="false"></von-input>
          <von-input placeholder="手机号码" v-model="register.phone" label="手机号" autocomplete="false"></von-input>
          <von-input placeholder="请输入密码" type="password" v-model="register.password" autocomplete="false" label="密码"></von-input>
          <von-input placeholder="请再次输入密码" type="password" v-model="register.password2" autocomplete="false" label="验证密码"></von-input>
        </div>
      </div>
      <div class="btn-group">
        <md-button v-show="showLogin" class="button button-positive button-block" @click.native="login">登陆</md-button>
        <md-button v-show="!showLogin" class="button button-balanced button-block" @click.native="registe">立即注册</md-button>
        <span class="change-type" @click="showLogin=!showLogin">{{showLogin?'现在注册':'立即登录'}}</span>
      </div>
    </div>
  </div>

</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import {
    deepCopy,
    IsPhone
  } from 'tools/utils'

  export default {
    name: "login",
    data() {
      return {
        showLogin: true,
        user: {
          phone: "",
          password: ""
        },
        register: {
          name: "",
          phone: "",
          password: "",
          password2: ""
        }
      };
    },
    computed: {
      ...mapGetters([
        'userInfo',
      ])
    },
    mounted() {
      this.user.phone = this.userInfo ? this.userInfo.phone : ''
    },
    methods: {
      login() {
        this.$ajax.post('/user/login', this.user).then((res) => {
          if (res.code === 1) {
            //存储在vuex中
            this.$store.dispatch('saveUser', res.data);
            sessionStorage.setItem('isLogin', "true")

            this.$router.push({
              path: '/'
            })
          } else {
            /* 显示一个文字提示，3秒后关闭 */
            $toast.show(res.msg, 1000).then(() => {
              this.user.password = ''
            })
          }
        })
      },
      registe() {
        var that = this;
        var register = deepCopy(this.register);
        if (!IsPhone(register.phone)) {
          $toast.show('请输入正确的手机号', 1000);
          return;
        }
        if (register.password !== register.password2) {
          $toast.show('两次密码不一致,请重新输入', 1000);
          return;
        }
        delete register.password2;
        $loading.show('注册中...')
        this.$ajax.post('/user/register', register).then((res) => {
          $loading.hide()

          if (res.code === 1) {
            $toast.show('注册成功,现在登录', 2000);
            that.showLogin = true;
          } else {
            $toast.show(res.msg, 1000);
            if (res.code === 2003) {
              that.register.phone = ''
            }
          }

        })
      }
    }
  };

</script>

<style lang="scss" scoped>
  .btn-group {
    position: relative;
    height: 50px;
    >div {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 40%;
    }
    .change-type {
      position: absolute;
      bottom: 0;
      right: 25px;
      color: gray;
    }
  }

</style>
